<template>
  <div>
      <!-- tupian -->
      <div class="dt-pic">
          <div class="dt-nav" @click="$router.back(-1)">
              <a href="#"><img src="@/assets/pic/return.png" alt=""></a>
          </div>
          <img v-bind:src="details.pictureUrl" alt="">
      </div>
      <div class="dt-name">
          <div class="dt-ziti">
              {{details.productName}}
          </div>
      </div>
      <div class="dt-price">
        <p class="goods-sales-price">$
            <em>{{ details.productPrice }}</em>
        </p>
      </div>
      <div class="dt-gray"></div>
      <div class="dt-lotto">
          <p class="lotto-wenzi">抽奖折率</p>
          <p class="lotto-wenzi2">The Highest Discount Rate : <span class="zhelv">{{details.lowDiscount*100+"%"}}</span></p>
      </div>
      <div class="dt-kapai">
          <div class="kapai">
              <div class="front"><img src="@/../static/kapai.jpg" alt=""></div>
              <div class="back">
                  <h3>Congratulation</h3>
                  <h4>The Discount You Got Is:</h4>
                  <span id="zhelv">{{discount.discount1}}</span>
              </div>
          </div>
          <div class="kapai">
              <div class="front"><img src="@/../static/kapai.jpg" alt=""></div>
              <div class="back">
                  <h3>Congratulation</h3>
                  <h4>The Discount You Got Is:</h4>
                  <span id="zhelv">{{discount.discount2}}</span>
              </div>
          </div>
          <div class="kapai">
              <div class="front"><img src="@/../static/kapai.jpg" alt=""></div>
              <div class="back">
                  <h3>Congratulation</h3>
                  <h4>The Discount You Got Is:</h4>
                  <span id="zhelv">{{discount.discount3}}</span>
              </div>
          </div>
          <div class="kapai">
              <div class="front"><img src="@/../static/kapai.jpg" alt=""></div>
              <div class="back">
                  <h3>Congratulation</h3>
                  <h4>The Discount You Got Is:</h4>
                  <span id="zhelv">{{discount.discount4}}</span>
              </div>
          </div>
          <div class="kapai">
              <div class="front"><img src="@/../static/kapai.jpg" alt=""></div>
              <div class="back">
                  <h3>Congratulation</h3>
                  <h4>The Discount You Got Is:</h4>
                  <span id="zhelv">{{discount.discount5}}</span>
              </div>
          </div>
          <div class="kapai">
              <div class="front"><img src="@/../static/kapai.jpg" alt=""></div>
              <div class="back">
                  <h3>Congratulation</h3>
                  <h4>The Discount You Got Is:</h4>
                  <span id="zhelv">{{discount.discount6}}</span>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import axios from 'axios'
import Cookies from 'js-cookie';
export default {
    data(){
        return{
            msg:"print sleeveless chiffon dress fashionable waistband multilayer skirt",
            details:{},
            discount:{},
            count:"",
            productid:"",
            user:""
        }
    },
    created: function() {
        var goodsId=this.$route.query.Id;
        console.log("xiaoxiao "+goodsId);
        // this.$store.commit(types.USER,data);
        // console.log(this.$store.state.user);
        axios.get('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/ProductController/handleProductDetail',{params:{productId:goodsId}}
        ).then((result)=>{
            var res = result.data;
            console.log(res);
            this.discount = res.data.Discount;
            var productid = res.data.ProductDetail.productId;
            console.log(productid);
            this.productid= res.data.ProductDetail.productId;
            this.details = res.data.ProductDetail;
        });
    },
    mounted:function(){
        var _this=this;
        $(function(){
            $(".kapai").click(function(){
            $(this).css("transform","rotateY(180deg)");
            var n=$(this).index(); 
            $(".back").eq(n).css("display","inline-block"); 
            $(".front").eq(n).hide();
            //获取点击折率
            var count=$(".back span").eq(n).text();
            console.log(count);
            _this.count=count;
            console.log(_this.productid);
            //1秒钟后所有卡片翻转
            setTimeout(
                function() {
                    $(".kapai").css("transform","rotateY(180deg)");
                    $(".back").eq(0).css("display","inline-block");
                    $(".front").eq(0).hide();
                    $(".back").eq(1).css("display","inline-block");
                    $(".front").eq(1).hide();
                    $(".back").eq(2).css("display","inline-block");
                    $(".front").eq(2).hide();
                    $(".back").eq(3).css("display","inline-block");
                    $(".front").eq(3).hide();
                    $(".back").eq(4).css("display","inline-block");
                    $(".front").eq(4).hide();
                    $(".back").eq(5).css("display","inline-block");
                    $(".front").eq(5).hide();
                }.bind(this),
                1500
                );
            //发送axios请求
            _this.getEmail();
            });
            
        });
        
    },
    methods:{
        getEmail(){
            console.log(this);
            console.log(this._data.productid);
            console.log(this._data.count);
            console.log(this.$store.state.user);
            axios.get('http://106.13.96.243:8080/Neuq_JavaWeb_war_exploded/ProductController/handleLotterDraw',
            {
                params:{
                    email:this.$store.state.user.email,
                    productId:this._data.productid,
                    finalDiscount:this._data.count
                }
            }).then((result)=>{
                var res = result.data;
                console.log(res);
                if(res.statu == 10000){
                    alert("Congratulation!You Got a "+this._data.count+" coupon");
                    
                }else{
                    alert("Please Login");
                    setTimeout(
                        function() {
                        this.$router.push('/');
                        }.bind(this),
                        1000
                    );
                }
            });
        }
    },
}
</script>

<style scope>
.dt-pic{
    margin: 0px;
    width: 100%;
    height: 290px;
    background-color: #fcf;
}
.dt-pic img{
    width: 100%;
    height: 100%
}
.dt-nav{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(0,0,0,.3);
	position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    z-index: 10;
}
.dt-nav img{
    width:80%;
    height: 80%;
    top: 8%;
    position: absolute;
    left: 5%;
    margin: auto;
}
.dt-name{
    width: 100%;
    height: 60px;
    /* background-color: #cfc; */
    padding-top: 4px;
    /* border: 1px solid green; */
}
.dt-ziti{
    width: 96%;
    height: 90%;
    margin: 0 2%;
    background-color: #fff;
    font-size: 18px;
    line-height: 27px;
    text-align: left;
    font-weight: bold;
    /* border: 1px solid red; */
    overflow: hidden;
}
.dt-price{
    width: 100%;
    height: 32px;
    position: relative;
    /* background-color: yellow; */
    /* border: 1px solid red; */
    padding: 0 20px;
}
.goods-sales-price{
    background-color: #fff;
    font-size: 24px;
    line-height: 28px;
    margin: 0;
    font-weight: bold;
    position: absolute;
    color: #e4393c;
}
em{
    font-size: 34px;
    font-style: normal;
}
.dt-gray{
    width:100%;
    height: 11px;
    position: relative;
    background-color: rgba(234, 234, 234, 0.805);
}
.dt-lotto{
    width: 100%;
    height: 72px;
    position: relative;
    /* background-color: yellow; */
    /* border: 1px solid red; */
    padding: 0;
}
.lotto-wenzi{
    margin: 0;
    height: 38px;
    font-size: 26px;
    text-align: center;
    line-height: 38px;
    /* background-color: #fcf; */
}
.lotto-wenzi2{
    margin: 0;
    height: 34px;
    font-size: 16px;
    text-align: center;
    line-height: 34px;
    /* background-color: #fcf; */
}
#zhelv{
    width: 80%;
    margin: 0 auto;
    font-size: 24px;
    font-weight: bold;
    color: #e4393c;
}
.dt-kapai{
    width: 100%;
    height: 324px;
    /* background-color:red; */
    padding-top: 20px;
    /* padding-left: 11px; */
    perspective:1000px;
    position: relative;
}
.kapai{
    float: left;
    width: 30%;
    height: 147px;
    margin-bottom: 20px;
    margin-left: 2.5%;
    transition:0.6s;
    border: 1px solid red;
    border-radius: 3%;
    transform-style:preserve-3d;
    background-color: #fff;
}
.kapai img{
    width: 100%;
    height: 100%;
    border-radius: 3%;
}
.front,.back{
    width: 100%;
    height: 100%;
    border-radius: 3%;
}
/* .front {
    display: none;
    transform: rotateY(180deg);
} */
.back {
    display: none;
    transform: rotateY(180deg);
}
.back h3{
    margin-top: 28px;
    font-size: 1.2em;
    color: black;
}
.back h4{
    margin-top: 28px;
    font-size: 12px;
    color: black;
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;

}
</style>